<template>
	<div>
		<el-form ref="formRef" class="ls-form" label-position="top">
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">资金配置</div>
				<el-form-item label="资金冻结时长(小时)" prop="release_time">
					<div class="w-80">
						<el-input type="number" v-model.trim="tradeData.release_time" placeholder="请输入资金冻结时长(小时)"></el-input>
						<div class="form-tips">新增充值、奖励等等，需要冻结n个小时才可提现，设置0为不冻结</div>
					</div>
				</el-form-item>
				<el-form-item label="独立冻结（上述资金冻结时长>0才会生效）" prop="is_open_df">
					<div>
						<el-switch v-model="tradeData.is_open_release" :active-value="'1'" :inactive-value="'0'" />
						<span class="mt-1 ml-2">
							{{ tradeData.is_open_release=='1' ? '开启' : '关闭' }}
						</span>
						<div class="form-tips">开启后，资金类型可单独设置冻结时长，未设置则使用统一时长</div>
					</div>
				</el-form-item>
				<el-form-item label="冻结明细" v-if="tradeData.is_open_release == 1">
					<div>
						<draggable class="draggable" v-model="tradeData.release_list" animation="300">
							<template v-slot:item="{ element: item, index }">
								<del-wrap class="max-w-[320px]" :key="index" @close="handleDelete(index)">
									<div class="bg-fill-light flex items-center w-full p-2 mb-4 cursor-move">
										<div class="ml-3 flex-1">
											<div class="flex items-center">
												<div class="w-[120px]">资金类型</div>
												<el-select class="w-full" v-model="item.type" placeholder="请选择资金类型" @click="handleResDict()">
													<el-option v-for="item_type in dictData.finance_type" :key="item_type.value" :label="item_type.name" :value="item_type.value" />
												</el-select>
											</div>
											<div class="flex items-center mt-3">
												<div class="w-[120px]">冻结时长</div>
												<el-input type="number" v-model="item.time" placeholder="请输入冻结时长" />
											</div>
											<div class="form-tips">冻结时长必须大于0</div>
										</div>
									</div>
								</del-wrap>
							</template>
						</draggable>
						<el-button type="primary" @click="handleAdd()">添加</el-button>
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">提现配置</div>
				<el-form-item label="每日提现次数" prop="withdraw_num">
					<div class="w-80">
						<el-input v-model.trim="tradeData.withdraw_num" placeholder="请输入每日提现次数"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="最低提现金额" prop="withdraw_num">
					<div class="w-80">
						<el-input v-model.trim="tradeData.withdraw_min" placeholder="请输入最低提现金额"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="最大提现金额" prop="withdraw_max">
					<div class="w-80">
						<el-input v-model.trim="tradeData.withdraw_max" placeholder="请输入最大提现金额"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="强制实名" prop="need_realname">
					<div>
						<el-switch v-model="tradeData.need_realname" active-value="1" inactive-value="0" />
						<span class="mt-1 ml-2">
							{{ tradeData.need_realname==1 ? '开启' : '关闭' }}
						</span>

						<div class="form-tips">开启后，需要实名认证通过才可提现</div>
					</div>
				</el-form-item>
				<!-- <el-form-item label="完成量化" prop="need_lh">
					<div>
						<el-switch v-model="tradeData.need_lh" active-value="1" inactive-value="0" />
						<span class="mt-1 ml-2">
							{{ tradeData.need_lh==1 ? '开启' : '关闭' }}
						</span>

						<div class="form-tips">开启后，需完成量化才可提现</div>
					</div>
				</el-form-item> -->
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">充值配置</div>
				<el-form-item label="每日充值次数" prop="recharge_num">
					<div class="w-80">
						<el-input v-model.trim="tradeData.recharge_num" placeholder="请输入每日充值次数"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="最低充值金额" prop="recharge_min">
					<div class="w-80">
						<el-input v-model.trim="tradeData.recharge_min" placeholder="请输入最低充值金额"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="常用充值金额" prop="withdraw_total_invest">
					<div class="w-80">
						<el-input :rows="6" type="textarea" v-model.trim="tradeData.common_money"
							placeholder="请输入常用充值金额"></el-input>
						<div class="form-tips">多个使用换行隔开</div>
					</div>
				</el-form-item>
				<el-form-item label="强制绑定提现账户" prop="need_bing_wallet">
					<div>
						<el-switch v-model="tradeData.need_bing_wallet" active-value="1" inactive-value="0" />
						<span class="mt-1 ml-2">
							{{ tradeData.need_bing_wallet==1 ? '开启' : '关闭' }}
						</span>

						<div class="form-tips">开启后，需要绑定提现账户才可充值</div>
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">转账配置</div>
				<el-form-item label="新用户转账" prop="is_transfer">
					<div>
						<el-switch v-model="tradeData.is_transfer" active-value="1" inactive-value="0" />
						<span class="mt-1 ml-2">
							{{ tradeData.is_transfer==1 ? '开启' : '关闭' }}
						</span>

						<div class="form-tips">开启后，新增用户可使用转账功能</div>
					</div>
				</el-form-item>
				<el-form-item label="最低转账金额" prop="transfer_min">
					<div class="w-80">
						<el-input v-model.trim="tradeData.transfer_min" placeholder="请输入最低转账金额"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="最大转账金额" prop="transfer_max">
					<div class="w-80">
						<el-input v-model.trim="tradeData.transfer_max" placeholder="请输入最大转账金额"></el-input>
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">抽奖配置</div>
				<el-form-item label="抽奖消耗" prop="draw_point">
					<div class="w-80">
						<el-input v-model.trim="tradeData.draw_point" placeholder="请输入抽奖消耗"></el-input>
						<div class="form-tips">单次抽奖消耗的积分数量</div>
					</div>
				</el-form-item>
			</el-card>
		</el-form>

		<footer-btns v-perms="['setting.web.web_setting/setWebsite']">
			<el-button type="primary" @click="handleSubmit">保存</el-button>
		</footer-btns>
	</div>
</template>

<script lang="ts" setup name="dictType">
	import Draggable from 'vuedraggable'
	import { isEmpty } from 'lodash-es';
	import { getWebsiteProject, setWebsiteProject } from '@/api/setting/website'
	import { useDictData } from '@/hooks/useDictOptions'
	// 获取字典数据
	const { dictData } = useDictData('finance_type')
	const name = ref('trade')

	// 表单数据
	const tradeData = reactive({
		robot_model: "1",
		robot_range: [0, 0],
		robot_range_min_money: 100,
		withdraw_num: "",
		withdraw_min: "",
		withdraw_max: '',
		common_money: '',
		recharge_num: '',
		recharge_min: '',
		release_time: 0,
		is_open_release: 1,
		release_list: [],
		need_realname: 0,
		need_lh: 0,
		need_bing_wallet: 0,
		is_transfer: 0,
		transfer_min: 0,
		transfer_max: 0,
		draw_point: 0
	})

	const handleAdd = () => {
		handleResDict()
		tradeData.release_list.push({
			type: '',
			time: tradeData.release_time
		})
	}

	const handleDelete = (index : number) => {
		tradeData.release_list.splice(index, 1)

	}
	const handleResDict = () => {
		let in_array = ["1", "4", "5", "11", "14", "15", "17", "21", "22", "23", "24"]
		let new_array = []
		dictData.finance_type.forEach((item,index) => {
			if(in_array.includes(item.value)){
				new_array.push(item)
			}
		})
		dictData.finance_type = new_array
	}
	
	const handleSubmit = async () => {
		await setWebsiteProject({ name: name.value, content: tradeData })
		getData()
	}

	const getData = async () => {
		const data = await getWebsiteProject({ name: name.value })
		if (!isEmpty(data.data)) {
			for (const key in tradeData) {
				if (data.data[key] != null && data.data[key] != undefined) {
					//@ts-ignore
					tradeData[key] = data.data[key]
				}
			}
		}
	}

	getData()
</script>

<style lang="scss" scoped></style>